<template>
  <div class="login">
    <div class="dl-box">
      <div class="top">用户登录</div>
      <div class="user">
        <img src="../../assets/images/yhm.png" alt="" />
        <input type="text" placeholder="账号" v-model="user" />
      </div>
      <div class="password">
        <img src="../../assets/images/password.png" alt="" />
        <input type="password" placeholder="密码" v-model="password" />
      </div>
      <div class="jizhu">
        <p>
          <input type="checkbox" id="pass" />
          <label for="pass">记住密码</label>
        </p>
        <p class="right">忘记密码？</p>
      </div>
      <div class="btn" @click="dl">登录</div>
    </div>
  </div>
</template>

<script>
import service from "../../mock/user.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    onMounted(async () => {
      const res = await service.getDate();
      console.log(res);
    });
    const user = ref("");
    const password = ref("");
    const dl = async () => {
      const res = await service.login(user.value, password.value);
      console.log(res);
      if (res == "成功") {
        const res2 = await service.getDate();

        localStorage.setItem("token", res2.data[0].token);
        router.push("/index");
      }
    };
    return {
      dl,
      user,
      password,
    };
  },
};
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/images/login.png) no-repeat;
  background-size: cover;
  // background-position: center 0;
  .dl-box {
    // color:  #fff;
    position: absolute;
    width: 550px;
    height: 360px;
    background: rgba(255, 255, 255, 0.2);
    top: 190px;
    right: 157px;
  }
  .user,
  .password {
    height: 60px;
    width: 80%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    border: 3px solid #008cfb;
    border-radius: 4px;
    margin-top: 19px;
    line-height: 60px;
    input {
      display: inline-block;
      border: none;
      background: rgba(255, 255, 255, 0);
    }
    img {
      vertical-align: middle;
      margin-right: 30px;
      margin-left: 15px;
    }
  }
  .jizhu {
    height: 60px;
    width: 80%;
    margin: 0 auto;
    line-height: 60px;
    margin-top: 10px;
    position: relative;
    .right {
      position: absolute;
      right: 0;
      top: 50%;
      cursor: pointer;
      transform: translateY(-50%);
    }
  }
  .top {
    text-align: center;
    width: 100%;
    height: 24px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 21px;
    color: #fff;
    margin-top: 19px;
  }
  .btn {
    width: 55%;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    background: linear-gradient(0deg, #007bed 0%, #008ff8 100%);
    opacity: 0.8;
    border-radius: 4px;
    text-align: center;

    cursor: pointer;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
